<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>热门活动</title>

  <link rel="stylesheet" href="../css/normalize.css">
  <link rel="stylesheet" href="../css/sddy.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.0/css/swiper.min.css">
</head>
<body>
  <div id="box-wrap">
    <!-- 标题栏 -->
    <div id="title-wrap">
      <img class="title-logo" src="../images/logo.png" alt="" />
      <img class="title-menu" src="../images/menu.png" alt="" />
    </div>

    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../images/img_1.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../images/img_2.png" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/img_3.png" alt="">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- 章节内容 -->
    <section id="activity-section">
      <h3>
        最新一期的活动，小伙伴看完都惊呆了！没想到吧哈哈哈哈哈！
      </h3>
      <p class="activity-date">09:00</p>
      <img class="activity-img" src="../images/img_9.png" alt="" />
      <p class="activity-content">
        内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案。
      </p>
      <div class="activity-detail">
        <p>查看详情</p>
        <img src="../images/right_arrow.png" alt="">
      </div>
    </section>
    
    <section id="activity-section">
      <h3>
        活动标题
      </h3>
      <p class="activity-date">昨天</p>
      <img class="activity-img" src="../images/img_10.png" alt="" />
      <p class="activity-content">
        内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案。
      </p>
      <div class="activity-detail">
        <p>查看详情</p>
        <img src="../images/right_arrow.png" alt="">
      </div>
    </section>

    <section id="activity-section">
        <h3>
          活动标题
        </h3>
        <p class="activity-date">昨天</p>
        <img class="activity-img" src="../images/img_11.png" alt="" />
        <p class="activity-content">
          内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案。
        </p>
        <div class="activity-detail">
          <p>查看详情</p>
          <img src="../images/right_arrow.png" alt="">
        </div>
      </section>

    <!-- footer -->
    <footer id="footer">
      <button>下载APP</button>
      <text class="copyright">Ver 2017-2018 盛德新能源</text>
      <text class="copyright">Copyright by Santa, Support by evfort. ICP: 18012315</text>
    </footer>
  </div>

  <!-- 侧边栏 -->
  <div id="side-wrap">
    <header>
      <img class="side-logo" src="../images/logo.png" alt="" />
      <img class="side-close" src="../images/close.png" alt="" />
    </header>
    <div id="side-ul">
      <ul>
        <li id="home">
          <a href="home.html">
            <text>首页</text>
            <img src="../images/right_arrow.png" alt="" />
          </a>
        </li>
        <li>
          <a href="about.html">
            <text>关于我们</text>
            <img src="../images/right_arrow.png" alt="" />
          </a>
        </li>
        <li>
          <a href="activity.html">
            <text>热门活动</text>
            <img src="../images/right_arrow.png" alt="" />
          </a>
        </li>
        <li>
          <a href="download.html">
            <text>下载APP</text>
            <img src="../images/right_arrow.png" alt="" />
          </a>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- mask -->
  <div id='side-mask'></div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="../js/sddy.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.0/js/swiper.min.js"></script>
  <script>
    // swiper滚动
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: {
        disableOnInteraction: false,
      }, // 自动轮播
      
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      }
    })    
    
    // 查看详情
    $(".activity-detail").click(function() {
      location.href = "./activity-detail.html?id=123"
    })

  </script>
</body>
</html>